<template>
  <div>
    <Header></Header>
    <div class="nav_content">
      <main id="content" class="nav_main" >
        <section v-for="(section, index) in sections" :key="section.id" :class="index == 0 ?'nav_select_h2 nav_section_h2_0':'nav_select_h2 nav_section_h2_1'"  >
          <h2 >{{ section.name }}</h2>
            <div class="m-nav-links" >
              <template v-for="(navigation) in section.pubNavigationList">
                <a class="m-nav-link"  :href="navigation.url" target="_blank">
                  <div class="nav_box">
                    <div class="nav_box_header">
                      <el-image
                        style="width: 30px; height: 30px;border: 1px solid #f6f6f7;border-radius: 8px;"
                        :src="navigation.coverImg?'/dev-api'+navigation.coverImg: navigation.imgUrl">
                      </el-image>
                      <p class="nav_title">{{navigation.name}}</p>
                    </div>
                    <p v-show="navigation.description" class="nav_desc">
                      {{navigation.description}}
                    </p>
                  </div>
                </a>
              </template>
            </div>
        </section>

        <div style="height: 500px;">

        </div>
      </main>


      <!--这里 outline.js 会生成导航菜单-->
      <aside id="aside">

      </aside>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
import  css  from '@/assets/styles/navigation.scss'
import { getNavigationList,getNavigationTypeList } from '@/api/navigation/navigation'
import moment from 'moment/moment'
const Outline = require('../../../resources/outline.js');
import '../../../resources/outline.js/outline.css'

export default {
  components: { Footer, Header },
  data() {
    return {
      sections: [],
      outline: null,
    };
  },
  methods: {
    // 获取导航分类
    getNavigationTypeList() {
      this.loading = true;
      getNavigationTypeList(this.queryParams).then(response => {
        this.sections = response.rows;
        this.loading = false;
        this.$nextTick(() => {
          this.outline = new Outline({
            articleElement: '#content',
            selector: 'h2,h3,h4,h5,h6',
            scrollElement: 'html,body',
            position: 'sticky',
            placement: '',
            parentElement: '#aside',
            stickyHeight: 50,
            // 如果喜欢更简洁的高亮效果，可以选择设置为 false
            animationCurrent: true,
            // 是否显示侧边的按钮工具栏
            hasToolbar: true,
            customClass:'',
          });
        })
      });
    },
  },
  mounted() {
    this.getNavigationTypeList()
  },
};
</script>

<style scoped>
  /* 右侧导航栏 */
  #aside{
    background-color: #f6f8fa;
    height: 100%;
    width: 20%;
    position: fixed;
    right: 0;
  }
</style>







